<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
			<title>顾客详情</title>
			<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
			<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
			<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
			 crossorigin="anonymous">
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
			 integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> -->

			<link rel="stylesheet" type="text/css" href="../static/dist/css/bootstrap.css" />
		</head>
	<body>
		<style type="text/css">
			body,
			html {
				padding: 0;
				background-color: #F8F8F8;
			}

			.container-fluid {
				padding: 0;
				width: 90%;
				margin: 15px auto 10px;
				border: solid 1px #EFEFEF;
				background-color: #FFFFFF;
				border-radius: 5px;
				overflow: hidden;
				box-shadow: 1px 3px 10px #afafaf;
			}

			.xxxx .container-fluid .top-img {
				width: 100%;
			}

			.xxxx .container-fluid .top-img img {
				width: 100%;
				height: 100%;
				display: block;
			}

			hr {
				margin: 0;
			}

			.xxxx .main {
				width: 90%;
				margin: 15px auto;
				font-size: 14px;
				opacity: 0.6;
			}

			.xxxx .main .main-span {
				margin: 5px 0;
			}

			.xxxx .main .main-span .span-n {
				margin-right: 5px;
			}

			.xxxx .container {
				margin: 0;
				width: 100%;
				text-align: center;
				height: 40px;
				line-height: 40px;
				background-color: #FFFFFF;
			}

			.xxxx .container .glyphicon {
				line-height: 40px;
				float: left;
			}

			.xxxx .container .h4 {
				padding: 0;
			}

			.xxxx .list-msg {
				background-color: #FFFFFF;
				width: 90%;
				margin: 15px auto 10px;
				border: solid 1px #EFEFEF;
				border-radius: 5px;
				overflow: hidden;
				box-shadow: 1px 3px 10px #afafaf;
				padding-bottom: 10px;
			}

			.xxxx .list-msg .title {
				padding: 5px 10px;
				height: 30px;
			}

			.xxxx .list-msg .title .glyphicon {
				opacity: 0.5;
				float: right;
			}

			.xxxx .list-msg .lt-msg {
				padding: 5px 10px;
				height: 30px;
			}

			.xxxx .list-msg .lt-msg .left {
				margin-right: 10px;
				float: left;
			}

			.xxxx .list-msg .lt-msg .right {
				float: left;
				width: 170px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			[v-cloak] {
				display: none;
			}

			.NO_data {
				text-align: center;
				padding: 30px;
			}

			/* 模态框 */
			.modal-content .modal-body {
				text-align: left;
				padding: 10px;
				max-height: 250px;
				overflow: scroll;
			}

			.modal-content .modal-footer {
				padding: 5px;
			}

			.modal-content .modal-header {
				padding: 10px;
			}

			.modal-content .modal-title {
				text-align: center;
			}

			/* 警告框 */
			.alert-danger {
				text-align: center;
				position: absolute;
				width: 100%;
				top: 0%;
				opacity: 0.95;
			}

			.glyphicon-hand-left {
				display: none;
				position: absolute;
				left: 15px;
				font-size: 24px;
				color: #FFFFFF;
				animation-name: myfirst;
				animation-duration: 1s;
				animation-timing-function: linear;
				animation-delay: 1s;
				animation-iteration-count: infinite;
				animation-direction: alternate;
				animation-play-state: running;
				-webkit-animation-name: myfirst;
				-webkit-animation-duration: 1s;
				-webkit-animation-timing-function: linear;
				-webkit-animation-delay: 1s;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-direction: alternate;
				-webkit-animation-play-state: running;
			}

			@keyframes myfirst {0% {color: #3399FF;left: 15px;}33.3% {color: #3399FF;left: 25px;}66.6% {color: #3399FF;left: 15px;}100% {color: #3399FF;left: 25px;}}

			@-moz-keyframes myfirst {0% {color: #3399FF;left: 15px;}33.3% {color: #3399FF;left: 25px;}66.6% {color: #3399FF;left: 15px;}100% {color: #3399FF;left: 25px;}}

			@-webkit-keyframes myfirst {0% {color: #3399FF;left: 15px;}33.3% {color: #3399FF;left: 25px;}66.6% {color: #3399FF;left: 15px;}100% {color: #3399FF;left: 25px;}}

			@-o-keyframes myfirst {0% {color: #3399FF;left: 15px;}33.3% {color: #3399FF;left: 25px;}66.6% {color: #3399FF;left: 15px;}100% {color: #3399FF;left: 25px;}}

			.glyphicon-chevron-left {
				position: relative;
			}
			
			
		</style>
		
		<div class="xxxx" v-cloak>
			<div class="container">
				<span class="glyphicon glyphicon-chevron-left" @click="back"><span class="glyphicon glyphicon-hand-left"></span></span>
				<h4><strong>详情页面</strong></h4>
			</div>

			<div class="container-fluid">
				<div  v-cloak class="NO_data" v-if="show">
					无数据
				</div>
				<div class="top-img">
					<img v-bind:src="customer_list.customer.imgPath">
				</div>
				<div class="main">
					<div class="main-span">
						<span class="span-n">客户姓名：</span>
						<span class="span-v">{{customer_list.customer.username}}</span>
					</div>
					<hr>
					<div class="main-span">
						<span class="span-n">客户类型：</span>
						<span class="span-v">{{customer_list.customer.type}}</span>
					</div>
					<hr>
					<div class="main-span">
						<span class="span-n">客户群体：</span>
						<span class="span-v">{{customer_list.customer.group}}</span>
					</div>
					<hr>
					<div class="main-span">
						<span class="span-n">最近到访：</span>
						<span class="span-v">{{gettime(customer_list.customer.createTime)}}</span>
					</div>
					<hr>
					<div style="margin: 5px 0;"  @click="addMsg()">
						<div style="float: right; margin-bottom: 5px; line-height: 24px;"><strong>点击新增到访记录</strong> <span class="glyphicon glyphicon-chevron-right"></span></div>
					</div>
				</div>
			</div>
			
			<div class="list-msg">
				<div class="title" @click="more">
					<span class="text" class="">查看更多</span>
					<span class="glyphicon glyphicon-chevron-right"></span>
				</div>
				<hr>

				<div v-for="item in customer_list.customer.remarkList" @click="getVal(item.detail)">
					<div class="lt-msg" data-toggle="modal" data-target=".bs-example-modal-sm">
						<span class="left">{{gettime(item.createTime)}}</span>
						<span class="right">{{item.detail}}</span>
					</div>
					<hr>
				</div>

				<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
					<div class="modal-dialog modal-sm" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								<h4 class="modal-title" id="myModalLabel">详细内容</h4>
							</div>
							<div class="modal-body" style="text-align: left !important;">
								{{msg_index}}
							</div>
							<!-- <div class="modal-footer">
							<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
						 </div> -->
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		<div class="alert alert-danger alert-dismissable hide" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close">
				<span aria-hidden="true">&times;</span>
			</button>
			<strong>普通管理员无法查看其他管理员的客户</strong>
		</div>
		<script src="../static/js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../static/dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->

		<script src="../static/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var customer_app = new Vue({
				el: '.xxxx',
				data: {
					show: false,
					userId: '',
					customer_list: {
						customer: {
							imgPath: '',
							username: '',
							type: '',
							group: '',
							createTime: ''
						}
					},
					msg_index: ""
				},
				created() {
					const userId = this.getUrlParam("userId")
					if (this.getUrlParam("state") != 1) {
						$(".glyphicon-hand-left").css("display", "block")
						setTimeout(function() {
							$(".glyphicon-hand-left").css("display", "none")
						}, 3000)
					}
					this.userId = userId
					$.ajax({
						type: 'GET',
						url: "/face/wechat/detail/" + userId,
						data: {},
						success: function(resp) {


							if (typeof("sdsd") == typeof(resp) && resp.length < 100) {
								var resp = eval('(' + resp + ')')
							}
							if (resp.code == "302") {
								customer_app.$data.show == false
								console.log(resp)
								window.location.href =
									"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5acca64b07361a8c&redirect_uri=http%3A%2F%2Ftest.aimendian.cn%2Fface%2Fgrant&response_type=code&scope=snsapi_base&state=112@" +
									userId + "#wechat_redirect";;
							} else if (resp.code == 503) {
								customer_app.$data.show == true
								console.log("无数据")

							} else if (resp.code == 502) {
								$('.alert-danger').removeClass('hide').addClass('in')
								setTimeout(function() {
									$('.alert-danger').removeClass('in').addClass('hide')
								}, 2000)
								console.log(resp)
							} else {
								customer_app.$data.show == true
								customer_app.customer_list = resp.data
							}
						},
						error: function(error) {
							console.log(error)
						}
					})

				},
				methods: {
					getUrlParam(name) {
						var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
						var r = window.location.search.substr(1).match(reg);
						if (r != null) return decodeURI(r[2]);
						return null;
					},
					addMsg() {
						var id = this.getUrlParam("userId")
						window.location.href = "./addMsg.html?userId=" + id 
					},
					gettime: function(t) {
						var _time = new Date(t);
						var year = _time.getFullYear(); //2017
						var month = _time.getMonth() + 1; //7
						var date = _time.getDate(); //10
						if (date.toString().length < 2 && month.toString().length < 2) {
							return year + "-" + "0" + month + "-" + "0" + date; //这里自己按自己需要的格式拼接
						} else if (date.toString().length < 2) {
							return year + "-" + month + "-" + "0" + date; //这里自己按自己需要的格式拼接
						} else if (month.toString().length < 2) {
							return year + "-" + "0" + month + "-" + date; //这里自己按自己需要的格式拼接
						} else {
							return year + "-" + month + "-" + date; //这里自己按自己需要的格式拼接
						}
					},
					back() {
						location.href = './wxIndex.html'
					},
					more() {
						location.href = "./search.html?userId=" + this.userId
					},
					getVal(msg) {
						this.$data.msg_index = msg
					}
				}
			})
		</script>
	</body>
</html>
